<template>
  <!--设备二维码标签重新生成弹窗-->
  <px-dialog v-model="visible" title="设备二维码标签重新生成" width="1200px" destroy-on-close append-to-body inline @close="handleCancel">
    <px-form ref="formRef" :model="formValue" label-width="100px">
      <px-row>
        <px-col :span="24">
          <px-form-item label="地块">
            <px-select v-model="formValue.facCode" placeholder="请选择地块" clearable>
              <px-option v-for="item in facCodeList" :key="item.id" :label="item.name" :value="item.value" />
            </px-select>
          </px-form-item>
        </px-col>
      </px-row>
    </px-form>
    <div class="descriptions-box">
      <p>说明：</p>
      <ul>
        <li>1. 该功能用于对数据字典中”值班电话“修改后对设备二维码标签进行批量重新生成；</li>
        <li>2. 如不选择地块，点击“确定”按钮后，则对全部设备进行二维码标签重新生成；</li>
        <li>3. 如只选择地块，则对该地块内所有设备二维码标签进行重新生成；</li>
        <li>4. 重新生成标签时间较长，执行重新生成命令后12小时全部更新完毕。</li>
      </ul>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <px-button @click="handleCancel">取 消</px-button>
        <px-button type="primary" @click="handleSubmitAuditForm(formRef)">确 定</px-button>
      </div>
    </template>
  </px-dialog>
</template>

<script lang="ts" setup>
import { batchCreateEqpImgs } from "@/api/erc/equip";
import { PxMessage } from "px-ui";
import { computed, ref, onMounted } from "vue";
import { queryDictData } from "@/api/common"; //设备状态接口
onMounted(() => {
  querySelectList();
});
// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["visible"]);

const visible = computed(() => props.visible);

const formRef = ref();

const facCodeList = ref([]);

const formValue = ref<Record<string, any>>({});

const handleCancel = () => {
  emits("closeDialog");
};

/** 提交按钮 */
const handleSubmitAuditForm = async (formEl: any) => {
  try {
    if (!formEl) return;
    await formEl.validate(async valid => {
      if (valid) {
        await batchCreateEqpImgs({ ...formValue.value });
        PxMessage.success("设备二维码标签重新生成中，请耐心等待");
        handleCancel();
      }
    });
  } catch {}
};
// 归属地块、存放位置,设备状态下拉框
const querySelectList = async () => {
  //地块
  facCodeList.value = [{ name: "全部", value: "", id: -1 }];
  const params2 = {
    typeCode: "ERC_FACTORY_AREA"
  };
  const data2 = await queryDictData(params2);
  facCodeList.value = facCodeList.value.concat(data2);
};
</script>

<style lang="scss" scoped>
.descriptions-box {
  display: flex;
  flex-direction: row;
  margin-left: 56px;
  font-size: 15px;
  color: #666;
}
:deep(.select-trigger) {
  width: 250px;
}
</style>
